<template>
	<div>
		<!-- 面包屑导航区域 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片区域 -->
		<el-card>
			<!-- 搜索添加区域 -->
			<el-row :gutter="20">
				<el-col :span="8">
					<el-input placeholder="请输入内容" v-model="queryinfo.query" clearable @clear="getUserList">
						<el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
					</el-input>
				</el-col>
				<el-col :span="4">
					<el-button type="primary" @click="adddialogVisible=true">添加用户</el-button>
					<!-- 添加用户对话框 -->
					<el-dialog title="添加用户" :visible.sync="adddialogVisible" width="50%" @close="addDialogClosed">
						<!-- 内容主体区域-->
						<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="120px">
							<el-form-item label="用户名称" prop="username">
								<el-input v-model="addForm.username"></el-input>
							</el-form-item>
							<el-form-item label="密码" prop="password">
								<el-input v-model="addForm.password"></el-input>
							</el-form-item>
							<el-form-item label="邮箱" prop="email">
								<el-input v-model="addForm.email"></el-input>
							</el-form-item>
							<el-form-item label="手机" prop="mobile">
								<el-input v-model="addForm.mobile"></el-input>
							</el-form-item>
						</el-form>
						<!-- 底部区域-->
						<span slot="footer" class="dialog-footer">
							<!-- 隐藏对话框-->
							<el-button @click="adddialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="adduser">确 定</el-button>
						</span>
					</el-dialog>
				</el-col>
			</el-row>
			<!-- 用户列表数据 -->
			<el-table :data="userlist" border stripe>
				<el-table-column type="index" label="#"></el-table-column>
				<el-table-column label="姓名" prop="username"></el-table-column>
				<el-table-column label="邮箱" prop="email"></el-table-column>
				<el-table-column label="电话" prop="mobile"></el-table-column>
				<el-table-column label="角色" prop="role_name"></el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.mg_state" @change="userStatus(scope.row)">
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<!-- 编辑 -->
						<el-button type="primary" icon="el-icon-edit" size="small" @click="showDialogClosed(scope.row.id)"></el-button>

						<el-dialog title="修改用户" :visible.sync="editdialogVisible" width="50%" @close="editdialogClosed">
							<!-- 内容主体区域 -->
							<el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="120px">
								<el-form-item label="用户名称" prop="username">
									<el-input v-model="editForm.username" disabled></el-input>
								</el-form-item>
								<el-form-item label="邮箱" prop="email">
									<el-input v-model="editForm.email"></el-input>
								</el-form-item>
								<el-form-item label="手机" prop="mobile">
									<el-input v-model="editForm.mobile"></el-input>
								</el-form-item>
							</el-form>
							<!-- 底部区域-->
							<span slot="footer" class="dialog-footer">
								<!-- 隐藏对话框-->
								<el-button @click="editdialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="editUserInfo">确 定</el-button>
							</span>
						</el-dialog>
						<el-button type="danger" icon="el-icon-delete" size="small" @click="delopen(scope.row.id)"></el-button>
						<!-- 分配角色按钮 -->
						<el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
							<el-button type="warning" icon="el-icon-setting" size="small" @click="Setrole(scope.row)">
							</el-button>
						</el-tooltip>
						<el-dialog title="分配角色" :visible.sync="rolesdialogVisible" width="50%"
						@close="SetRoleClosed">
							<div>
								<p>当前用户：{{userinfo.username}}</p>
								<p>当前用户：{{userinfo.role_name}}</p>
								<p>分配新角色：
									<el-select v-model="selectroleId" placeholder="请选择">
										<el-option v-for="item in rolesList" :key="item.id" :label="item.roleName" :value="item.id">
										</el-option>
									</el-select>
								</p>
							</div>
							<!-- 底部区域-->
							<span slot="footer" class="dialog-footer">
								<!-- 隐藏对话框-->
								<el-button @click="rolesdialogVisible = false">取 消</el-button>
								<el-button type="primary" @click="saveRoleInfo">确 定</el-button>
							</span>
						</el-dialog>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryinfo.pagenum"
			 :page-sizes="[1, 2, 5, 10]" :page-size="queryinfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>

	</div>
</template>

<script>
	export default {
		data() {
			//验证邮箱
			var checkEmail = (rules, value, cb) => {
				//验证邮箱
				const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
				if (regEmail.test(value)) {
					return cb()
				}
				cb(new Error('请输入合法的邮箱'))
			}
			//验证手机
			var checkmobile = (rules, value, cb) => {
				//验证手机号
				const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
				if (regMobile.test(value)) {
					return cb()
				}
				cb(new Error('请输入合法的手机号'))
			}
			return {
				//获取用户列表的参数
				queryinfo: {
					query: '',
					//当前页数
					pagenum: 1,
					//当前每页显示多少条数据
					pagesize: 2
				},
				userlist: [],
				total: 0,
				//控制添加用户对话框的显示与隐藏
				adddialogVisible: false,
				//控制修改用户对话框的显示与隐藏
				editdialogVisible: false,
				//查询到的用户信息
				editForm: {},
				//表单验证规则
				editFormRules: {
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}, {
						validator: checkEmail,
						trigger: 'blur'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: checkmobile,
							trigger: 'blur'
						}
					]
				},
				//添加用户的表单数据
				addForm: {
					username: '',
					password: '',
					email: '',
					mobile: ''
				},
				//添加表单的验证规则
				addFormRules: {
					username: [{
							required: true,
							/* 必填项 */
							message: '请输入登录名称',
							/* 错误提示 */
							trigger: 'blur' /* 在失去鼠标焦点时触发 */
						},
						{
							min: 3,
							max: 8,
							message: '长度在 3 到 8 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 8,
							message: '长度在 6 到 8 个字符',
							trigger: 'blur'
						}
					],
					email: [{
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}, {
						validator: checkEmail,
						trigger: 'blur'
					}],
					mobile: [{
							required: true,
							message: '请输入手机号',
							trigger: 'blur'
						},
						{
							validator: checkmobile,
							trigger: 'blur'
						}
					]
				},
				rolesdialogVisible: false,
				//需要被分配权限的对象
				userinfo: {},
				//所有角色的数据列表
				rolesList: [],
				//已选中的角色
				selectroleId: ''
			}
		},
		created() {
			this.getUserList()
		},
		methods: {
			async getUserList() {
				const {
					data: res
				} = await this.$http.get('users', {
					params: this.queryinfo
				})
				if (res.meta.status !== 200) {
					return this.$message.error('用户列表获取失败!')
				}
				this.userlist = res.data.users
				this.total = res.data.total
				console.log(res)
			},
			//监听pagesize改变事件
			handleSizeChange(newSize) {
				console.log(newSize)
				this.queryinfo.pagesize = newSize
				this.getUserList()
			},
			//监听页码值改变
			handleCurrentChange(newPage) {
				console.log(newPage)
				this.queryinfo.pagenum = newPage
				this.getUserList()
			},
			//监听switch开关状态
			async userStatus(userinfo) {
				console.log(userinfo)
				const {
					data: res
				} = await this.$http.put(
					`users/${userinfo.id}/state/${userinfo.mg_state}`
				)
				if (res.meta.status !== 200) {
					useinfo.mg_state = !useinfo.mg_state
					return this.$message.error('更新用户状态失败！')
				}
				this.$message.error('更新用户状态成功！')
			},
			//监听添加用户对话框关闭操作
			addDialogClosed() {
				this.$refs.addFormRef.resetFields()
			},
			//点击按钮，添加新用户
			adduser() {
				this.$refs.addFormRef.validate(async vail => {
					if (!vail) return
					//发起添加用户的网络请求
					const {
						data: res
					} = await this.$http.post('users', this.addForm)
					if (res.meta.status !== 201) {
						this.$message.error('添加用户失败!')
					}
					this.$message.success('添加用户成功!')
					//隐藏添加用户对话框
					this.adddialogVisible = false
					//重新获取用户列表
					this.getUserList()
				})
			},
			//展示编辑对话框
			async showDialogClosed(id) {
				//获取修改id
				console.log(id)
				const {
					data: res
				} = await this.$http.get('users/' + id)
				if (res.meta.status !== 200) {
					return this.$message.error('查询用户信息失败！')
				}
				this.editForm = res.data
				this.editdialogVisible = true
			},
			//监听修改用户的对话框的关闭时间
			editdialogClosed() {
				this.$refs.editFormRef.resetFields()
			},
			editUserInfo() {
				this.$refs.editFormRef.validate(async vail => {
					console.log(vail)
					if (!vail) return
					//发起请求
					const {
						data: res
					} = await this.$http.
					put('users/' + this.editForm.id, {
						email: this.editForm.email,
						mobile: this.editForm.mobile
					})
					if (res.meta.status !== 200) {
						this.$message.error('修改用户失败!')
					}
					//隐藏添加用户对话框
					this.editdialogVisible = false
					//重新获取用户列表
					this.getUserList()
					this.$message.success('修改用户成功!')
				})
			},
			async delopen(id) {
				/* 弹框询问是否删除 */
				const delresult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '删除提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).catch(err => err)
				//如果用户确认删除，返回字符串confirm
				//如果用户取消删除，返回字符串cancel
				/* console.log(delresult) */
				if (delresult !== 'confirm') {
					return this.$message.info('已经取消删除！')
				}
				/* console.log('确认删除') */
				const {
					data: res
				} = await this.$http.delete('users/' + id)
				if (res.meta.status !== 200) {
					this.$message.error('删除用户失败!')
				}
				this.$message.success('删除用户成功!')
				//重新获取用户列表
				this.getUserList()
			},
			//展示分配角色对话框
			async Setrole(userinfo) {
				this.userinfo = userinfo
				//在展示对话框之前，获取所有角色列表
				const {
					data: res
				} = await this.$http.get('roles')
				if (res.meta.status !== 200) {
					this.$message.error('获取角色列表失败!')
				}
				this.rolesList = res.data
				this.rolesdialogVisible = true
			},
			async saveRoleInfo() {
				if (!this.selectroleId) {
					return this.$message.error('请选择要分配的角色！')
				}
				const {
					data: res
				} = await
				this.$http.put(`users/${this.userinfo.id}/role`, {
					rid: this.selectroleId
				})
				if (res.meta.status !== 200) {
					return this.$message.error('更新角色失败!')
				}
				this.$message.success('更新角色成功！')
				this.getUserList()
				this.rolesdialogVisible = false
			},
			//监听分配对话框的关闭
			SetRoleClosed(){
				this.selectroleId=''
				this.userinfo={}
			}
		}
	}
</script>

<style lang="less" scoped>
</style>
